$chip-height: 32px

.q-chip
  vertical-align: middle
  border-radius: 16px
  outline: 0
  position: relative

  height: $chip-height
  margin: 4px

  background: #e0e0e0
  color: rgba(0,0,0,.87)

  font-size: 14px

  padding: 7px 12px
  transition: .3s

  &--colored
    .q-chip__icon
      color: inherit

  &--outline
    background: transparent
    border: 1px solid currentColor

  &--selected
    .q-avatar
      visibility: hidden !important
      width: 10px

  .q-avatar
    font-size: $chip-height
    margin-left: -12px
    margin-right: 6px

  &__icon
    color: rgba(0,0,0,.54)
    font-size: 20px
    margin: -4px

    &--left
      margin-right: 6px
    &--right
      margin-left: 6px
    &--remove
      margin-left: 6px
      margin-right: -6px
      opacity: .6
      transition: .3s
      outline: none

      &:hover,
      &:focus
        opacity: 1

  &__content
    white-space: nowrap

  &--dense
    border-radius: 12px
    height: 24px
    font-size: 12px
    padding: 0 6px

    .q-avatar
      font-size: 24px
      margin-left: -6px
      margin-right: 4px

    .q-chip__icon
      font-size: 14px
      margin: 0
      &--left
        margin-right: 5px
      &--right
        margin-left: 5px
      &--remove
        margin-left: 5px
        margin-right: -2px

    &.q-chip--selected
      .q-avatar
        width: 5px

  &--square
    border-radius: $generic-border-radius
    .q-avatar
      border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)

body.desktop .q-chip--clickable:focus
  box-shadow: $shadow-1
